<template>
  <el-drawer
    :visible.sync="visible"
    :title="title"
    :modal-append-to-body="true"
    :append-to-body="true"
    :destroy-on-close="false"
    :modal="true"
    :wrapperClosable="false"
    size="450px"
    @closed="closed"
    >
      <div style="padding: 10px;">
        <div style="font-size: 14px;color: #333333;">主机名称:<span style="font-size: 14px;font-weight: bold;padding-left: 5px;">{{terminal.name}}</span></div>
      </div>

      <div style="padding: 10px;">
        <div class="list-header">服务列表</div>
        <div>
          <el-table
            :data="tableData"
            :show-header="false"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="名称"
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status=='-1' "  type="warning">不可用</el-tag>
                <el-tag v-else-if="scope.row.status=='0' "  type="danger">停止</el-tag>
                <el-tag v-else-if="scope.row.status=='1' "  type="info">正在启动</el-tag>
                <el-tag v-else-if="scope.row.status=='2' "  type="success">运行中</el-tag>
                <el-tag v-else-if="scope.row.status=='3' "  type="warning">停止中</el-tag>
                <el-tag v-else type="danger">未知</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="left" >
             <template slot-scope="scope">
               <el-button v-if="scope.row.status=='0'"  type="text" @click="handleStart(scope.row)">启动</el-button>
               <el-button v-if="scope.row.status=='2'"  type="text" @click="handleStop(scope.row)">停止</el-button>
               <el-button type="text" size="small" @click="handleEdit(scope.row)">配置</el-button>
             </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <SignalingDialog
        v-if="signalingDialog.visible"
        :properties="signalingDialog"
        @closed="closeSignaling"
        @refresh="load"
      />

      <RelayDialog
        v-if="relayDialog.visible"
        :properties="relayDialog"
        @closed="closeRelay"
        @refresh="load"
      />

      <dispatch-dialog
        v-if="dispatchDialog.visible"
        :properties="dispatchDialog"
        @closed="closeDispatch"
        @refresh="load"
      />

  </el-drawer>
</template>

<script>

  import SignalingDialog from './children/SignalingDialog.vue'
  import RelayDialog from './children/RelayDialog.vue'
  import DispatchDialog from './children/DispatchDialog.vue'



  import {
    saveTerminal,
  } from '@/api/biz/terminal'
  export default {
    name: 'ServerDrawer',
    components: {
      SignalingDialog,
      RelayDialog,
      DispatchDialog
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.terminal.id = value.data.id || ''
            this.terminal.name = value.data.name || ''
            this.terminal.ip = value.data.ip || ''
            this.terminal.port = value.data.port || ''
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'服务管理',
        loading:false,
        terminal: {
          id: '',
          name: '',
          ip:'',
          port:''
        },
        tableData: [],
        signalingDialog: {
          visible: false,
          type: '0',
          data: {},
          terminal:{}
        },
        relayDialog: {
          visible: false,
          type: '0',
          data: {},
          terminal:{}
        },
        dispatchDialog: {
          visible: false,
          type: '0',
          data: {},
          terminal:{}
        },
      }
    },
    created() {
      this.load()
    },
    methods:{
      load(){
        this.loading=true
        fetch(`http://${this.terminal.ip}:${this.terminal.port}/Renderers/Any/Server/list`, {
            method: "POST",
            headers: { "Content-type": "application/json" },
        }).then(res => {
          if (!res.ok) { throw Error(res.statusText) }
          return res.json()
        }).then(json => {
          if(json.code==200 && json.result){
            this.tableData=json.result
          }else{
            this.tableData=[]
          }
        }).catch((error) => {
          this.$message({
            type: 'error',
            message:error
          })
        }).finally(() => {
          this.loading = false
        });

      },
      handleStart: function(data) {
          this.loading = true
          restartServer({
            id: data.id
          }).then(response => {
            this.$message({
              message: '成功',
              type: 'success',
              duration: 500
            })
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleStop: function(data) {
        this.$confirm('重启服务，将会影响正在使用该服务的用户，确认重启【' + data.name + '】吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          stopServer({
            id: data.id
          }).then(response => {
            this.$message({
              message: '成功',
              type: 'success',
              duration: 500
            })
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      },
      handleEdit: function(data) {
        if('signalling'==data.type){
          this.handleEditSignaling(data);
        }
        else if('relay'==data.type){
          this.handleEditRelay(data);
        }
        else if('dispatch'==data.type){
          this.handleEditDispatch(data);
        }
      },

      handleEditSignaling: function(data) {
        this.signalingDialog.visible = true
        this.signalingDialog.type = '1'
        this.signalingDialog.data = data
        this.signalingDialog.terminal=this.terminal
      },
      closeSignaling: function(e) {
        this.signalingDialog.visible = false
        this.signalingDialog.data = {}
        this.load()
      },
      handleEditRelay: function(data) {
        this.relayDialog.visible = true
        this.relayDialog.type = '1'
        this.relayDialog.data = data
        this.relayDialog.terminal=this.terminal
      },
      closeRelay: function(e) {
        this.relayDialog.visible = false
        this.relayDialog.data = {}
        this.load()
      },
      handleEditDispatch: function(data) {
        this.dispatchDialog.visible = true
        this.dispatchDialog.type = '1'
        this.dispatchDialog.data = data
        this.dispatchDialog.terminal=this.terminal
      },
      closeDispatch: function(e) {
        this.dispatchDialog.visible = false
        this.dispatchDialog.data = {}
        this.load()
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style lang="scss" scoped>

  .el-dialog__header {
      border-bottom: 1px solid #aaaaaa;
  }

  .el-dialog__body {
      padding: 0px 0px;
  }

  .el-dialog__footer {
      padding: 10px;
      padding-top: 10px;
      border-top: 1px solid #aaaaaa;
  }

  .el-drawer__header {
      padding: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid  #aaaaaa;
      font-weight: bold;
      font-size: 1rem;
      margin-bottom: 0.625rem;
      color: #333333;
  }


  .list-header{
    border-left: 5px solid #02a7f0;
    padding-left: 5px;
    line-height: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }

</style>
